color2k

What is color2k?

color2k is a lightweight and fast JavaScript library for color manipulation and conversion. It provides a variety of functions to work with colors, including conversion between different color formats, color mixing, and color adjustments.

What are color2k's main functionalities?

Color Conversion

Convert colors between different formats such as HEX to RGB.

const color2k = require('color2k');
const hexColor = '#ff5733';
const rgbColor = color2k.hexToRgb(hexColor);
console.log(rgbColor); // Output: { r: 255, g: 87, b: 51 }

Color Mixing

Mix two colors together with a specified ratio.

const color2k = require('color2k');
const color1 = '#ff5733';
const color2 = '#33ff57';
const mixedColor = color2k.mix(color1, color2, 0.5);
console.log(mixedColor); // Output: '#996645'

Color Lightening

Lighten a color by a specified amount.

const color2k = require('color2k');
const color = '#ff5733';
const lightenedColor = color2k.lighten(color, 0.2);
console.log(lightenedColor); // Output: '#ff8a66'

Color Darkening

Darken a color by a specified amount.

const color2k = require('color2k');
const color = '#ff5733';
const darkenedColor = color2k.darken(color, 0.2);
console.log(darkenedColor); // Output: '#cc4629'

Color Alpha Adjustment

Adjust the alpha (transparency) of a color.

const color2k = require('color2k');
const color = 'rgba(255, 87, 51, 1)';
const adjustedAlphaColor = color2k.alpha(color, 0.5);
console.log(adjustedAlphaColor); // Output: 'rgba(255, 87, 51, 0.5)'

Other packages similar to color2k

color

The 'color' package is a comprehensive library for color conversion and manipulation. It supports a wide range of color models and provides extensive methods for color operations. Compared to color2k, it is more feature-rich but also larger in size.

chroma-js

chroma-js is a powerful library for color manipulation and conversion. It offers a wide range of functions for color operations, including color scales and color blending. It is similar to color2k in terms of functionality but provides more advanced features for color analysis and visualization.

tinycolor2

tinycolor2 is a lightweight library for color manipulation and conversion. It provides a simple API for common color operations and is known for its small footprint. Compared to color2k, tinycolor2 is slightly larger but offers a similar range of basic color manipulation functions.

README

color2k

a color parsing and manipulation lib served in roughly 2kB or less (2.8kB to be more precise)

color2k is a color parsing and manipulation library with the objective of keeping the bundle size as small as possible while still satisfying all of your color manipulation needs in an sRGB space.

The full bundle size is currently 2.8kB but gets as small as 2.1k with tree shaking.

Size comparison

lib	size
chroma-js	13.7kB
polished	11.2kB
color	7.6kB
tinycolor2	5kB
color2k	2.8kB 😎

👋 Compare tree-shaken bundle outputs on bundlejs.com

Installation

Install with a package manager such as npm

npm i color2k

OR use with skypack.dev in supported environments (e.g. deno, modern browsers).

import { darken, transparentize } from 'https://cdn.skypack.dev/color2k?min';

Usage

import { darken, transparentize } from 'color2k';

// e.g.
darken('blue', 0.1);
transparentize('red', 0.5);

How so small?

There are two secrets that keep this lib especially small:

1. Simplicity — only handles basic color manipulation functions
2. Less branching in code — only support two color models as outputs, namely rgba and hsla

Why only rgba and hsla as outputs?

This lib was created with the use case of CSS-in-JS in mind. At the end of the day, all that matters is that the browser can understand the color string you gave it as a background-color.

Because only those two color models are supported, we don't have to add code to deal with optional alpha channels or converting to non-browser supported color models (e.g. CMYK).

We believe that this lib is sufficient for all of your color manipulation needs. If we're missing a feature, feel free to open an issue 😎.

Credits

Heavy credits goes to polished.js and sass. Much of the implementation of this lib is copied from polished!

API and Documentation

Head over to the docs site